<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09-添加删除元素</title>
    <script src="../js/jquery-3.6.0.js"></script>
    <script>
        $(function () {
            let $ul = $("ul");
            // 尾部添加
            $("button").eq(0).click(function () {
                // 获取 input 输入框的内容
                let city = $("input").val();
                let str="<li id=\"city2\">"+city+"</li>";
                $ul.append(str);
                $("input").val("");
            });

            // 头部添加
            $("button").eq(1).click(function () {
                // 获取 input 输入框的内容
                let city = $("input").val();
                let str="<li id=\"city3\">"+city+"</li>";
                $ul.prepend(str);
                $("input").val("");
            });

            // 在北京前面添加城市
            $("button").eq(2).click(function () {
                // 获取 input 输入框的内容
                let city = $("input").val();
                let str="<li id=\"city4\">"+city+"</li>";
                $("#city1").before(str);
                $("input").val("");
            });

            // 在北京后面添加城市
            $("button").eq(3).click(function () {
                // 获取 input 输入框的内容
                let city = $("input").val();
                let str="<li id=\"city5\">"+city+"</li>";
                $("#city1").after(str);
                $("input").val("");
            });
        })
    </script>
</head>
<body>
<input type="text">
<button>尾部添加城市</button>
<button>头部添加城市</button>
<button>在北京前面添加城市</button>
<button>在北京后面添加城市</button>
<h4>城市排行榜</h4>
<ul>
    <li id="city1">北京</li>
</ul>
</body>
</html>